<template>
  <el-row :gutter="40" v-if="loaded">
    <el-col
      v-for="item in arrData"
      :key="item.id"
      :span="item.colspan ? 24 : 12"
    >
      <!-- :prop="item.name" -->
      <el-form-item
        class="formClass"
        :hidden="item.hidden"
        :label="item.label"
        label-width="160px"
        label-position="left"
        :rules="[
          {
            required: item.validators[0]?.required,
            message: `请输入${item.label}`,
          },
        ]"
      >
        <template v-if="item.type === 'DynaUIModelTextField'">
          <el-input
            v-model="innerFormData[item.name]"
            :readonly="preview || item.readonly"
          />
        </template>
        <template v-else-if="item.type === 'DynaUIModelCombo'">
          <el-select
            v-model="innerFormData[item.name]"
            placeholder=""
            style="width: 100%"
            filterable
            @change="selectChange(item)"
            :disabled="preview || item.readonly"
          >
            <el-option
              v-for="n in selectList[`${item.name}`]"
              :key="n.value"
              :label="n.text"
              :value="n.value"
            >
            </el-option>
          </el-select>
        </template>
        <template
          v-else-if="
            item.type === 'DynaUIModelDate' ||
            item.type === 'DynaUIModelDateTime'
          "
        >
          <el-date-picker
            :readonly="preview || item.readonly"
            style="width: 100%"
            v-model="innerFormData[item.name]"
            :type="item.type === 'DynaUIModelDate' ? 'date' : 'datetime'"
            placeholder="选择日期"
          >
          </el-date-picker>
        </template>
        <template v-else-if="item.type === 'DynaUIModelNumberField'">
          <el-input
            type="number"
            v-model="innerFormData[item.name]"
            style="width: 100%"
            :readonly="preview || item.readonly"
          />
        </template>
        <template v-else-if="item.type === 'DynaUIModelTextArea'">
          <el-input
            type="textarea"
            v-model="innerFormData[item.name]"
            style="width: 100%; min-height: 40px"
            :cols="item.colspan"
            resize="none"
            :rows="item.rowspan"
            :readonly="preview || item.readonly"
          />
        </template>
        <div class="suffix" v-if="item.unit">{{ item.unit }}</div>
      </el-form-item>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data () {
    return {
      loaded: false,
      innerFormData: {},
      subFormData: {}
    }
  },
  props: {
    arrData: {
      type: Array,
      require: true
    },
    formData: {
      type: Object,
      default: () => {}
    },
    selectList: {
      type: Object,
      default: () => {}
    },
    preview: {
      type: Boolean,
      default: false
    }
  },
  mounted () {
    console.log('formData', this.formData)
    console.log('arrData', this.arrData)
    this.innerFormData = JSON.parse(JSON.stringify(this.formData))
    console.log('this.innerFormData', this.innerFormData)
    for (let i = 0; i < this.arrData.length; i++) {
      if (this.arrData[i].type !== 'DynaUIModelCombo') {
        console.log('1', this.arrData[i])
        console.log('2', this.init(this.arrData[i]))
        this.innerFormData[this.arrData[i].name] =
          this.init(this.arrData[i]) || ''
      } else {
        console.log('aaaaa', this.arrData[i])
        console.log('to', this.init(this.arrData[i]))
        this.innerFormData[this.arrData[i].name] =
          this.init(this.arrData[i])?.toString() || ''
      }
    }
    const that = this
    this.$nextTick(() => {
      this.innerFormData = JSON.parse(JSON.stringify(this.innerFormData))
      that.loaded = true
    })
  },
  methods: {
    init (item) {
      const initAction = item.actions.find((action) => action.event === 'init')
      console.log('item', item)
      switch (initAction?.type) {
        case 'ConvertCodeAction':
          // case 'SelectInitSqlAction':
          // case 'SelectInitCodeAction':
          return this.formData[`${item.name}_convertvalue`]
        default:
          return this.formData[`${item.name}`]
      }
    },
    selectChange (item) {
      const initAction = item.actions.find((action) => action.event === 'init')
      const selectList = this.selectList[item.name]
      const currValue = this.innerFormData[item.name]
      const selectItem = selectList.find((item) => item.value == currValue)
      switch (initAction?.type) {
        case 'SelectInitCodeAction':
          // case 'SelectInitSqlAction':
          // case 'SelectFilterSqlAction':
          this.innerFormData[`${item.name}_convertvalue`] = selectItem.text
          break
        default:
          break
      }
    },
    getFormData () {
      const arrDataKeys = this.arrData
        .filter((a) => !a.readonly)
        .map((a) => a.name)
      const delKeys = Object.keys(this.subFormData).filter(
        (key) => arrDataKeys.indexOf(key) === -1
      )
      for (const delKey of delKeys) {
        delete this.subFormData[delKey]
      }
      return this.subFormData
    }
  },
  watch: {
    innerFormData: {
      handler (newvalue) {
        this.subFormData = { ...newvalue }
        console.log('innerFormData', newvalue)
      },
      deep: true
    }
  }
}
</script>
<style lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.formClass {
  position: relative;
  .suffix {
    position: absolute;
    color: #606266;
    right: 30px;
    bottom: 0;
  }
}
.el-textarea__inner {
  color: #606266;
  font-size: 14px;
  line-height: 40px !important;
  min-height: 40px !important;
  padding: 0 15px;
}
</style>
